<!DOCTYPE html>
<html lang="ch">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>motiondata</title>
</head>

<body>
    <!-- 返回图标 -->
    <div class="tit"><i class="iconfont iconleftarrow" id="iconBack"></i></div>
    <!-- 头部数据 -->
    <div class="header">
        <!-- 我的运动数据&头像 -->
        <div class="dpflex title mt6">
            <h3>我的运动数据</h3>
            <img alt="" id="img">
        </div>
        <!-- 总运动/本周消耗 -->
        <div class="data-box dpflex mt20">
            <!-- 总运动 -->
            <div class="sportssum">
                <h4>总运动</h4>
                <p><span id="time">--</span>分钟</p>
            </div>
            <!-- 本周消耗 -->
            <div class="consume">
                <h4>本周消耗</h4>
                <p><span id="powr">--</span>千卡</p>
            </div>
        </div>
        <!-- 运动数据 -->
        <div class="sportsdata dpflex jsbetween mt20">
            <!-- 消耗千卡 -->
            <div>
                <h5>消耗(千卡)</h5>
                <span id="powrs" class="mt8">---</span>
            </div>
            <div>
                <h5>累计(天)</h5>
                <span class="mt8" id="dayTimes">---</span>
            </div>
            <div>
                <h5>连续(天)</h5>
                <span class="mt8" id="counts">---</span>
            </div>
        </div>
    </div>
    <!-- 柱状图 -->
    <div class="mt20" id="weekTimeChart" style="width: 100%; height:300px;"></div>

    <!-- 饼状图 -->
    <div class="mt20" id="sportCateChart" style="width: 100%; height:300px;"></div>

    <!-- 堆叠条形图 -->
    <div class="mt20" id="weekSportChart" style="width: 100%; height:300px;"></div>

    <!-- 折线图 -->
    <div class="mt20" id="trainChart" style="width: 100%; height:300px;"></div>

    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.3.0/echarts.min.js"></script>
</body>

</html>